<template>
  <AddOrUpdateHandleGroup
    @refresh_func="refresh()"
    ref="add_or_update_handle_group_ref"
  ></AddOrUpdateHandleGroup>
<!--从后端返回信息部分-->
<el-form :model="handle_group_fuzzy_search_value" ref="form" :label-position=" 'right' " label-width="90px"
         :inline="true">

	<el-form-item prop="enable" label="启用状态">
		<el-radio-group v-model="handle_group_fuzzy_search_value.enable">
			<el-radio-button value="enable">启用</el-radio-button>
			<el-radio-button value="not_enable">未启用</el-radio-button>
			<el-radio-button value="all">全部</el-radio-button>
		</el-radio-group>
	</el-form-item>

  <el-form-item prop="handle_group_name" label="分组名称">
    <el-input v-model="handle_group_fuzzy_search_value.handle_group_name" autocomplete="off"/>
  </el-form-item>

  <el-form-item prop="mnemonic" label="助记码">
    <el-input v-model="handle_group_fuzzy_search_value.mnemonic" autocomplete="off"/>
  </el-form-item>

	<el-form-item>
		<el-button type="primary" @click="return_credit_list()">搜索</el-button>
	</el-form-item>

  <el-form-item>
    <el-button type="primary" @click="handleAdd()">添加处理方</el-button>
  </el-form-item>


</el-form>

<!-- 表格部分 -->
<el-table :data="tableData" style="width: 100%">
	<!--选择框-->
	<el-table-column label="编号" prop="id" v-if=" false "/>
	<el-table-column label="分组名称" prop="name"/>
	<el-table-column label="助记码" prop="mnemonic"/>
	<el-table-column label="是否启用">
		<template #default="scope: {row: HandleGroupList}">
			<!--      <span>{{scope.row._use ? '是':'否'}}</span>-->
			<el-switch v-model="scope.row.enable" size="small" @click="switch_change(scope.row)"/>
		</template>
	</el-table-column>
	<el-table-column label="修改人" prop="operator_name"/>
	<el-table-column label="创建时间" prop="operate_date_"/>
	<el-table-column align="right">
		<template #header>
		</template>
		<template #default="scope">
			<el-button size="small" @click="handleEdit(scope.row)">修改
			</el-button>
			<el-button
				size="small"
				type="danger"
				@click="handleDelete(scope.$index, scope.row)">删除
			</el-button>
		</template>
	</el-table-column>
</el-table>



  <!-- 分页 -->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 500]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=" total "
  />

</template>

<script lang="ts" setup>
import {reactive, Ref, ref, watch} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import type {FormInstance} from 'element-plus'
import {
  HandleGroupCRUDResponse,
  HandleGroupFuzzySearchResponse,
  HandleGroupList,
  HandleGroupUseResp
} from "@/api/inventory/handle_group/type.ts";
import {
  req_handle_group_deactivation_and_activation,
  reqHandleGroupCRUD,
  reqHandleGroupFuzzySearch
} from "@/api/inventory/handle_group";
import AddOrUpdateHandleGroup from "@/components/inventory/AddOrUpdateHandleGroup.vue";

const add_or_update_handle_group_ref = ref()

// 分页
const background: Ref<boolean> = ref(true)  // 是否带背景方框
const disabled: Ref<boolean> = ref(false)  // 是否可用
const small: Ref<boolean> = ref(false)  // 普通大小还是小一号
const currentPage: Ref<number> = ref(1)  // 当前所在页数
const pageSize: Ref<number> = ref(100)  // 一页有几条记录
const total: Ref<number> = ref(0) // 总条数
// 监视分页数据，若变化则请求数据
watch([currentPage, pageSize], () => {
  return_credit_list()
})

// 按照当前条件重新返回数据
const refresh = () => {
  return_credit_list()
}

// 处理方的启用和停用
const switch_change = async (row: HandleGroupList) => {
	const result: HandleGroupUseResp = await req_handle_group_deactivation_and_activation({
		id: row.id,
	})
  if(result.error){
    row.enable = !row.enable
  }else{
    ElMessage.success(result.success?.message)
  }
}

// 处理方分组模糊搜索
const handle_group_fuzzy_search_value = reactive<{
  handle_group_name: string | null
  mnemonic: string | null
	enable: 'enable' | 'not_enable' | 'all',
}>({
  handle_group_name: null,
  mnemonic: null,
  enable: 'all',
})

// el-form 的ref
const form = ref<FormInstance>()

// 提交查询条件
const return_credit_list = async () => {
	if(handle_group_fuzzy_search_value.handle_group_name === ''){
    handle_group_fuzzy_search_value.handle_group_name = null
  }
  if(handle_group_fuzzy_search_value.mnemonic === ''){
    handle_group_fuzzy_search_value.mnemonic = null
  }
	const result: HandleGroupFuzzySearchResponse = await reqHandleGroupFuzzySearch({
    name: handle_group_fuzzy_search_value.handle_group_name,
    mnemonic: handle_group_fuzzy_search_value.mnemonic,
    enable: handle_group_fuzzy_search_value.enable,
    start: (currentPage.value - 1) * pageSize.value,
    stop: currentPage.value * pageSize.value,
	})
	tableData.value = result.data.result
  total.value = result.data.total
	ElMessage.success(result.success?.message)
}

// 修改处理方
const handleEdit = (row: HandleGroupList) => {
  add_or_update_handle_group_ref.value.show_handle_group_CU(row, '修改')
}

// 添加处理方
const handleAdd = () => {
  add_or_update_handle_group_ref.value.show_handle_group_CU(null, '添加')
}

// 通过每条记录后的删除按钮进行删除
const handleDelete = async (index: number, row: HandleGroupList) => {
	await ElMessageBox.confirm(
		`您确认删除名称为 ${row.name} 的处理方分组？`,
		'警告',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	const result: HandleGroupCRUDResponse = await reqHandleGroupCRUD({
		mode: 'delete',
		delete: {
      handle_group_id: row.id,
		}
	})
	tableData.value.splice(index, 1)
	// 记得分页中的total需要减去1
	ElMessage.success(result.success?.message)
}

const tableData: Ref<HandleGroupList[]> = ref([])
</script>